<template>
    <view class="template-info">
        <view class="free-shipping-box">
            <text class="free-shipping-label">包邮方式</text>
            <choiceMenu
                class="free-shipping-input"
                ref="pinkageType"
                @numIndex="changeModel($event)"
                choiceHint="请选择包邮方式"
                :choiceList="freeShippingList"></choiceMenu>
        </view>

        <view v-show="countWayShow" class="free-shipping-box">
            <text class="free-shipping-label">计算方式</text>
            <choiceMenu
                class="free-shipping-input"
                ref="countWay1"
                choiceHint="请选择计算方式"
                :choiceList="chargingList"
                @chargingIndex="unitChange($event)"></choiceMenu>
        </view>

        <view class="package-conditions-box">
            <text class="package-conditions-label" v-show="conditions"></text>
            <view v-show="conditions" class="package-conditions-content">
                <view class="package-conditions-column">
                    <view class="package-conditions-row">
                        满
                        <input v-model="info.PinkageCount" class="package-quantity" type="digit" />
                        {{ postalUnit }}包邮，
                    </view>
                    <view class="package-conditions-row">
                        否则
                        <choiceCharging
                            ref="countWay2"
                            @chargingIndex="unitChange($event)"
                            choiceHint="选择计费方式"
                            :choiceList="chargingList"></choiceCharging>
                        计算运费
                    </view>
                </view>
            </view>
        </view>

        <view class="postage" v-show="postage">
            <text class="postage-label">资费</text>
            <view class="postage-input">
                <view class="postage-input-item">
                    <input
                        v-model="info.StartLimit"
                        class="postage-input-weight"
                        type="digit"
                        :placeholder="'请输入' + chargingUnit"
                        placeholder-class="postage-hint" />
                    {{ unit }}
                    <input
                        v-model="info.StartPrice"
                        class="postage-input-price"
                        type="digit"
                        placeholder="请输入金额"
                        placeholder-class="postage-hint" />
                    元起
                </view>
                <view class="line-box"></view>
                <view class="postage-input-item">
                    每<input
                        v-model="info.ContinueLimit"
                        class="postage-input-weight"
                        type="digit"
                        :placeholder="'请输入' + chargingUnit"
                        placeholder-class="postage-hint" />
                    {{ unit }}加
                    <input
                        v-model="info.ContinuePrice"
                        class="postage-input-price"
                        type="digit"
                        placeholder="请输入金额"
                        placeholder-class="postage-hint" />
                    元起
                </view>
                <view class="line-box"></view>
            </view>
        </view>
    </view>
</template>

<script>
import freightHead from "@/pages_supplier/components/freightTemplate/freight-head.vue"
import choiceMenu from "@/pages_supplier/components/freightTemplate/choice-menu.vue"
import choiceCharging from "@/pages_supplier/components/freightTemplate/choice-charging.vue"
export default {
    data() {
        return {
            Title: "",
            company: true,
            title: true,
            templateModel: 0,
            conditions: true,
            countWayShow: false,
            postalUnit: "件",
            info: {},
            asd: "",
            express: {},
            unit: "千克",
            charging: "计重",
            chargingUnit: "数量",
            chargingBox: true,
            postage: true,
        }
    },
    props: {
        freeShippingList: {
            type: Array,
            default: function () {
                return []
            },
        },
        chargingList: {
            type: Array,
            default: function () {
                return []
            },
        },
        model: {
            type: String,
            default: "-1",
        },
    },
    components: {
        freightHead,
        choiceMenu,
        choiceCharging,
    },
    computed: {},
    methods: {
        uploadInfo() {
            this.info.PinkageType = this.changeNum(this.$refs.pinkageType.upData(2))
            if (this.conditions == true) {
                this.info.CountWay = this.countcountWayChangeNum(this.$refs.countWay2.upData(2))
            } else {
                this.info.CountWay = this.countcountWayChangeNum(this.$refs.countWay1.upData(2))
            }

            return this.info
        },
        unitChange(num) {
            console.log(num)
            switch (num) {
                case 0:
                    this.unit = "件"
                    this.charging = "计件"
                    this.chargingUnit = "数量"
                    break
                case 1:
                    this.unit = "千克"
                    this.charging = "计重"
                    this.chargingUnit = "重量"
                    break
                case 2:
                    this.unit = "m³"
                    this.charging = "计体积"
                    this.chargingUnit = "体积"
                    break
            }
        },
        countWayChange(num) {
            switch (num) {
                case 0:
                    return "计件"
                case 1:
                    return "计重"
                case 2:
                    return "计体积"
            }
        },
        countcountWayChangeNum(string) {
            switch (string) {
                case "计件":
                    return 0
                case "计重":
                    return 1
                case "计体积":
                    return 2
            }
        },
        changeNum(string) {
            switch (string) {
                case "不包邮":
                    return 0
                case "按件包邮":
                    return 1
                case "按金额包邮":
                    return 2
                case "按重量包邮":
                    return 3
                case "全场包邮":
                    return 4
            }
        },
        change(num) {
            switch (num) {
                case 0:
                    return "不包邮"
                case 1:
                    return "按件包邮"
                case 2:
                    return "按金额包邮"
                case 3:
                    return "按重量包邮"
                case 4:
                    return "全场包邮"
            }
        },
        choiceModel(index) {
            this.changeModel(index)
        },
        changeModel(model) {
            switch (model) {
                case 0: //不包邮
                    this.conditions = false
                    this.chargingBox = true
                    this.postage = true
                    this.countWayShow = true
                    this.info.CountWay = this.countcountWayChangeNum(this.$refs.countWay2.upData(2))
                    this.$refs.countWay1.preload(this.countWayChange(this.info.CountWay))
                    break
                case 1:
                case 2:
                case 3: //包邮
                    this.chargingBox = true
                    this.postage = true
                    this.conditions = true
                    this.countWayShow = false
                    if (model == 1) {
                        this.postalUnit = "件"
                    } else if (model == 2) {
                        this.postalUnit = "元"
                    } else {
                        this.postalUnit = "千克"
                    }
                    this.info.CountWay = this.countcountWayChangeNum(this.$refs.countWay1.upData(2))
                    this.$refs.countWay2.preload(this.countWayChange(this.info.CountWay))
                    break
                case 4:
                    this.conditions = null
                    this.chargingBox = false
                    this.postage = false
                    this.countWayShow = false
                    break
            }
        },
        load(data) {
            if (data) {
                this.info = data
                console.log("获取模板：" + JSON.stringify(this.info))
                this.unitChange(this.info.CountWay)
            }
            if (this.conditions == true) {
                this.$refs.countWay2.preload(this.countWayChange(this.info.CountWay))
            } else {
                this.$refs.countWay1.preload(this.countWayChange(this.info.CountWay))
            }
            //计费方式
            this.$refs.pinkageType.preload(this.change(this.info.PinkageType)) //包邮方式
        },
    },

    created() {},
    onLoad() {},
    mounted() {
        this.$nextTick(function () {
            this.changeModel(parseInt(this.model))
        })
    },
}
</script>

<style lang="scss">
.template-info {
    background-color: $color-white;
    display: flex;
    flex-direction: column;
}

%box {
    display: flex;
}

.region-box {
    @extend %box;
}

.free-shipping-box {
    @extend %box;
}

.package-conditions-box {
    @extend %box;
}

.charging-box {
    @extend %box;
}

%left-style {
    font-size: 30rpx;
    padding: 16rpx 0;
    margin-bottom: 32rpx;
    width: 150rpx;
    margin-left: 30rpx;
}

.region-label {
    @extend %left-style;
}

.free-shipping-label {
    @extend %left-style;
    margin-bottom: 20rpx;
}

.package-conditions-label {
    @extend %left-style;
}

.charging-label {
    @extend %left-style;
}

.postage-label {
    @extend %left-style;
}

.postage {
    display: flex;
    flex-direction: row;
}

%right-style {
    font-size: 30rpx;
    background-color: $app-color-input-bg;
    padding: 16rpx 0 16rpx 20rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    margin-left: 20rpx;
}

.package-conditions-content {
    font-size: 28rpx;
    flex-direction: row;
    flex: 1;
    padding: 16rpx 0 0 20rpx;
    @extend %right-style;
}

.package-conditions-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.package-conditions-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;

    .package-quantity {
        text-align: center;
        font-size: 28rpx;
        border-bottom: 1px solid $color-gray-2;
        width: 150rpx;
        color: $app-color-main;
    }
}

.postage-input {
    background-color: $color-white;
    flex-direction: column;
    margin-right: 30rpx;
    padding-top: 16rpx;
    font-size: 28rpx;
    flex: 1;
    margin-left: 20rpx;

    .postage-input-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 6rpx;
        align-items: center;

        .postage-input-weight {
            flex: 1;
            font-size: 28rpx;
            text-align: center;
            color: $app-color-main;
        }

        .postage-input-price {
            flex: 1;
            font-size: 28rpx;
            text-align: center;
            color: $app-color-main;
        }
    }

    .postage-hint {
        font-size: 28rpx;
    }

    .line-box {
        margin-bottom: 40rpx;
        flex: 1;
        border-bottom: 1px solid $color-gray-3;
    }
}

.free-shipping-input {
}

.billing-method {
    color: $app-color-main;
    display: flex;
    align-items: center;
    font-size: 28rpx;
}
</style>
